<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间戳转换工具 - 在线工具集合</title>
    <link rel="stylesheet" href="../utils/styles.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #00ff88, #00b4d8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .header p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1em;
        }

        .conversion-type {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .conversion-type label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .conversion-type input[type="radio"] {
            appearance: none;
            width: 16px;
            height: 16px;
            border: 2px solid #00ff88;
            border-radius: 50%;
            position: relative;
        }

        .conversion-type input[type="radio"]:checked::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: #00ff88;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .input-area {
            margin-bottom: 20px;
        }

        .input-area label {
            display: block;
            margin-bottom: 10px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 1em;
            font-weight: 500;
        }

        .input-area input {
            width: 100%;
            padding: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: #fff;
            font-size: 1em;
        }

        .unit-select {
            margin-top: 10px;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .unit-select select {
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: white;
        }

        .action-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin: 20px 0;
        }

        .action-btn {
            padding: 15px 30px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(45deg, #00ff88, #00b4d8);
            color: #1a1a1a;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 255, 136, 0.3);
        }

        .result-area {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .result-success {
            color: #00ff88;
            font-weight: 500;
        }

        .result-error {
            color: #ff4d4d;
            font-weight: 500;
        }

        .date-picker {
            width: 100%;
            padding: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: #fff;
            font-size: 1em;
        }

        input[type="datetime-local"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            .conversion-type {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="../index.html" style="color: #00ff88; text-decoration: none; margin-bottom: 1rem; display: block;">← 返回首页</a>
        
        <div class="header">
            <h1>时间戳转换工具</h1>
            <p>支持时间戳与日期的双向转换</p>
        </div>

        <div class="conversion-type">
            <label>
                <input type="radio" name="conversionType" value="timestampToDate" checked>
                时间戳 → 日期
            </label>
            <label>
                <input type="radio" name="conversionType" value="dateToTimestamp">
                日期 → 时间戳
            </label>
        </div>

        <div class="input-area">
            <label id="inputLabel">时间戳</label>
            <input type="text" id="inputValue" placeholder="输入时间戳（支持秒或毫秒）...">
            <input type="datetime-local" id="dateTimePicker" class="date-picker" style="display: none;">
            <div class="unit-select" id="unitSection" style="display: none;">
                <span>输出单位:</span>
                <select id="timeUnit">
                    <option value="seconds">秒</option>
                    <option value="milliseconds">毫秒</option>
                </select>
            </div>
        </div>

        <div class="action-buttons">
            <button class="action-btn" id="convertBtn">立即转换</button>
        </div>

        <div class="result-area">
            <div id="resultContent">转换结果将显示在这里</div>
            <div id="additionalInfo" style="margin-top: 15px; font-size: 0.9em;"></div>
        </div>
    </div>

    <script>
        const conversionType = document.getElementsByName('conversionType');
        const inputLabel = document.getElementById('inputLabel');
        const inputValue = document.getElementById('inputValue');
        const dateTimePicker = document.getElementById('dateTimePicker');
        const unitSection = document.getElementById('unitSection');
        const timeUnit = document.getElementById('timeUnit');
        const convertBtn = document.getElementById('convertBtn');
        const resultContent = document.getElementById('resultContent');
        const additionalInfo = document.getElementById('additionalInfo');

        // 初始化日期选择器
        function initDateTimePicker() {
            const now = new Date();
            const timezoneOffset = now.getTimezoneOffset() * 60000;
            const localTime = new Date(now - timezoneOffset).toISOString().slice(0, 16);
            dateTimePicker.value = localTime;
        }

        function updateUI(type) {
            if (type === 'timestampToDate') {
                inputLabel.textContent = '时间戳';
                inputValue.style.display = 'block';
                dateTimePicker.style.display = 'none';
                unitSection.style.display = 'none';
            } else {
                inputLabel.textContent = '日期';
                inputValue.style.display = 'none';
                dateTimePicker.style.display = 'block';
                unitSection.style.display = 'flex';
                initDateTimePicker();
            }
        }

        function performConversion() {
            const isTimestampToDate = document.querySelector('input[name="conversionType"]:checked').value === 'timestampToDate';
            const input = isTimestampToDate ? inputValue.value.trim() : dateTimePicker.value;

            if (!input) {
                showResult('请输入有效内容', true);
                return;
            }

            try {
                if (isTimestampToDate) {
                    convertTimestampToDate(input);
                } else {
                    convertDateToTimestamp(input);
                }
            } catch (error) {
                showResult(error.message, true);
            }
        }

        function convertTimestampToDate(timestamp) {
            if (!/^-?\d+$/.test(timestamp)) {
                throw new Error('无效的时间戳格式');
            }

            const isMilliseconds = timestamp.length > 10;
            const date = new Date(isMilliseconds ? parseInt(timestamp) : parseInt(timestamp) * 1000);

            if (isNaN(date.getTime())) {
                throw new Error('无效的时间戳值');
            }

            const localDate = date.toLocaleString('zh-CN', { 
                year: 'numeric', 
                month: '2-digit', 
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false 
            });

            const utcDate = date.toUTCString();
            
            showResult(`
                <div>本地时间：${localDate}</div>
                <div>UTC 时间：${utcDate}</div>
            `);
            additionalInfo.innerHTML = `时间戳类型：${isMilliseconds ? '毫秒' : '秒'}（${timestamp}）`;
        }

        function convertDateToTimestamp() {
            const dateString = dateTimePicker.value;
            const date = new Date(dateString);
            
            if (isNaN(date.getTime())) {
                throw new Error('无法识别的日期格式');
            }

            const timestamp = timeUnit.value === 'seconds' 
                ? Math.floor(date.getTime() / 1000)
                : date.getTime();

            showResult(`时间戳：${timestamp}`);
            additionalInfo.innerHTML = `
                解析结果：
                <div>本地时间：${date.toLocaleString()}</div>
                <div>UTC 时间：${date.toUTCString()}</div>
            `;
        }

        function showResult(message, isError = false) {
            resultContent.innerHTML = message;
            resultContent.className = isError ? 'result-error' : 'result-success';
            additionalInfo.style.color = isError ? '#ff4d4d' : '#888';
        }

        function clearResult() {
            resultContent.textContent = '转换结果将显示在这里';
            resultContent.className = 'result-success';
            additionalInfo.textContent = '';
        }

        // 事件监听
        conversionType.forEach(radio => {
            radio.addEventListener('change', () => {
                updateUI(radio.value);
                clearResult();
            });
        });

        convertBtn.addEventListener('click', performConversion);
        inputValue.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') performConversion();
        });
        dateTimePicker.addEventListener('change', performConversion);

        // 初始化
        updateUI('timestampToDate');
    </script>
</body>
</html>